import {View} from '@tarojs/components'
import {CSSProperties} from 'react'

export const CFormItem: React.FC<{
  label?: string | JSX.Element
  subLabel?: string | JSX.Element
  style?: CSSProperties
  desc?: string | JSX.Element
  childrenStyle?: CSSProperties
}> = ({children, label, style, childrenStyle, desc, subLabel}): JSX.Element => {
  return (
    <View className="px-17" style={Object.assign({}, style)}>
      {label ? (
        <View className="hanzi text-16 font-medium">{label}</View>
      ) : null}

      {subLabel ? (
        <View className="hanzi text-14 text-xx_text mt-8">{subLabel}</View>
      ) : null}

      <View
        className="hanzi bg-white rounded-4 overflow-hidden"
        style={Object.assign(
          {padding: '0 20rpx', margin: '20rpx 0 0'},
          childrenStyle
        )}
      >
        {children}
      </View>

      {desc ? (
        <View className="hanzi pl-10 mt-10 text-14 text-xx_text">{desc}</View>
      ) : null}
    </View>
  )
}
